<template>
  <!-- 修改素材授权 -->
  <div class="change-auth">
    <div class="cell-wrapper">
      <div class="cell" @click="toggleDialog">
        <div class="label">当前绑定：<span class="mobile">{{ currentMobile }}</span></div>
        <div class="right">
          <span class="blue-text">更换绑定</span>
        </div>
      </div>
    </div>

    <!-- 更改手机号弹窗 -->
    <van-popup v-model="showDialog" :close-on-click-overlay="false">
      <div class="popup-content">
        <div class="title">更换手机号码</div>
        <div class="input-line">
          <img src="@/assets/image/input-mobile.png" alt="">
          <input 
            type="text" 
            class="input" 
            maxlength="11"
            placeholder="请输入新的手机号" 
            v-model="mobile"/>
        </div>
        <div class="input-line">
          <img src="@/assets/image/input-mobile.png" alt="">
          <input 
            type="text" 
            class="input" 
            maxlength="4"
            placeholder="短信验证码" 
            v-model="code"/>
          <p class="get-code" @click="getCode">{{ sumText }}</p>
        </div>
        <div class="btns">
          <div class="cancel-btn" @click="showDialog = false">取消</div>
          <div class="sure-btn" @click="sure">确认更换</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { sendCode, updateMobile } from '@/api/account'
import { Toast } from 'vant'

export default {
  data () {
    return {
      type: '部分授权',
      showDialog: false,
      currentMobile: '',
      mobile: '',
      code: '',
      list: [
        { name: '素材' },
        { name: '素材' },
        { name: '素材' },
        { name: '素材' },
        { name: '素材' },
      ],
      timer: null,
      phoneTest: /^1[3-9]\d{9}$/,
      sumText: '获取验证码',
    }
  },
  mounted () {
    this.currentMobile = this.$route.query.mobile
    document.title = '更改手机号'
  },
  methods: {
    sure () {
      const { mobile, code } = this
      if (!this.mobile || !this.code) return
      if (!this.phoneTest.test(this.mobile)) return
      updateMobile({
        mobile, code
      }).then(res => {
        console.log('change mobile end:', res)
        this.mobile = ''
        this.code = ''
        this.currentMobile = mobile
        this.showDialog = false
        Toast('更换成功')
      })
    },
    async getCode () {
      console.log('getCode')
      if(this.timer) return
      if(!this.mobile){
        Toast('请输入手机号！')
        return
      }
      if(!this.phoneTest.test(this.mobile)){
        Toast('请输入正确的手机号！')
        return
      }
      await sendCode({mobile: this.mobile})
      clearInterval(this.timer)
      let sum = 60
      this.timer = setInterval(()=>{
        sum --
        this.sumText = sum + '秒'
        if(sum <= 0){
          this.sumText = '获取验证码'
          clearInterval(this.timer)
        }
      },1000)
    },
    chooseMaterialPack () {
      this.$router.push({
        path: '/chooseMaterialPack'
      })
    },
    remove (index) {
      console.log('remove index:', index)
    },
    lineClick (type) {
      this.type = type
      this.showDialog = false
    },
    toggleDialog () {
      this.showDialog = true
    }
  }
}
</script>

<style scoped>
.btns {
  box-sizing: border-box;
  padding: 0 8vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btns > div {
  width: 25.6vw;
  height: 8.53vw;
  text-align: center;
  line-height: 8.53vw;
  border-radius: 1.07vw;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #FFFFFF;
}
.cancel-btn {
  background: rgba(0,0,0,.2);
}
.sure-btn {
  background: linear-gradient(108deg, #006EDD 0%, #009CEC 41%, #00A5A5 100%);
}
input {
  outline: none;
  border: none;
  background:#EEEEEE ;
}
input::-webkit-input-placeholder{
  font-family: Source Han Sans CN;
  font-size: 3.2vw;
  font-weight: normal;
  color: #CCCCCC;
}
.get-code {
  position: absolute;
  right: 3.2vw;
  width: 20.53vw;
  height: 7.47vw;
  line-height: 7.47vw;
  background: #0A67FF;
  text-align: center;
  border-radius: 3.73vw;
  font-family: Source Han Sans CN;
  font-size: 2.67vw;
  font-weight: 500;
  color: #FFFFFF;
}
.input-line {
  position: relative;
  display: flex;
  align-items: center;
  width: 64vw;
  height: 11.73vw;
  box-sizing: border-box;
  padding-left: 4vw;
  margin: 0 auto;
  background: #EEEEEE;
  margin-bottom: 4.27vw;
  border-radius: 1.07vw;
  overflow: hidden;
}
.input-line > img {
  width: 4.27vw;
  height: 4.27vw;
  margin-right: 3.2vw;
}
.input-line:nth-of-type(3){
  margin-bottom: 10.67vw;
}
.title {
  margin-bottom: 6.4vw;
  font-family: Source Han Sans CN;
  font-size: 3.73vw;
  font-weight: 500;
  text-align: center;
  color: #333333;
}

.blue-text {
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  color: #0A67FF;
}
.mobile {
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  color: #333333;
}
.add-material {
  text-align: right;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  line-height: 5.87vw;
  color: #006EDD;
}
.red-text {
  margin-right: 0.8vw;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #D81E06;
}
.del-icon {
  width: 4vw;
  height: 4vw;
}
.gray-text {
  color: #999999;
}
.material-list {
  box-sizing: border-box;
  padding-top: 4.27vw;
  border-top: 0.32vw solid #E6E6E6;
  padding-bottom: 5.33vw;
}
.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  height: 5.87vw;
  margin-bottom: 3.2vw;
  padding-left: 2.13vw;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  color: #666;
}
.item:last-of-type {
  margin-bottom: 5.33vw;
}
.item > p {
  display: flex;
  align-items: center;
}
.green-text {
  margin-right: 2.13vw;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #00A6A7;
}
::v-deep .van-overlay {
  background: rgba(0,0,0,0.3);
}
::v-deep .van-popup {
  border-radius: 3.2vw;
}
.popup-content {
  box-sizing: border-box;
  padding-top: 3.2vw;
  height: 67.2vw;
  width: 72vw;
  background: #fff;
  border-radius: 3.2vw;
}
.right {
  display: flex;
  align-items: center;
}
.right-icon {
  width: 3vw;
  height: 3vw;
}
.cell-wrapper {
  width: 89.6vw;
  margin: 0 auto;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
  background: #fff;
  border-radius: 2.13vw;
  box-sizing: border-box;
}
.cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 89.6vw;
  height: 16.53vw;
  padding: 0 3.2vw;
  box-sizing: border-box;
}
.change-auth {
  padding-top: 5.33vw;
}
.label {
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  color: #999999;
}
</style>